<template>
	<view class="_coach_card" @click="info">
		<view class="u-flex">
			<image :src="coach.avatar" class="image_size" mode="aspectFill"></image>
			<view class="u-m-l-30 u-flex-1">
				<view class="f-s-16 f-w-b">{{coach.name}}</view>
				<view class="u-flex u-m-t-12 u-flex-items-center u-flex-wrap">
					<block v-for="(label,index) in coach.labelList" :key="label.id">
						<tag class="u-m-t-12" :text="label" :right="6" :bottom="6" background="#fff" borderColor="rgb(32, 128, 248,.2)" color="rgb(32, 128, 248)"></tag>
					</block>
				</view>
				<view class="u-flex c-333 u-m-t-12">
					<view class="u-info f-s-14">学员</view>
					<view class="u-m-l-12 c-5e f-s-14">{{coach.studentNum}}</view>
					<view class="u-info f-s-14 u-m-l-12">人</view>
				</view>
				<view class="c-5e f-s-14 u-m-t-12">擅长：{{coach.major}}</view>
			</view>
		</view>
		<up-line margin="40rpx 0"></up-line>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import tag from "@/components/tag.vue"
	const props = defineProps({
		coach: Object
	})

	// 跳转详情
	const info = () => {
		uni.navigateTo({
			url: `/subPackages/coach/info?id=${props.coach.id}`
		})
	}
</script>

<style lang="scss" scoped>
	
	._coach_card {
		margin-top: 16px;

		.image_size {
			width: 90px;
			height: 120px;
			border-radius: 12px;

		}

		.label-box {
			margin-top: 8px;
			display: flex;
			align-items: center;
			width: 50px;
		}
	}
</style>